{% extends "base.html" %}

{% block title %} {{photo.name|escape}} - {{blog.title|escape}} {% endblock %}

{% block head_block %}

    <link href="/static/styles/galleryview.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="/static/js/jquery.easing.1.3.js">
</script>

	<script type="text/javascript" src="/static/js/jquery.timers-1.2.js">
</script>
<script type="text/javascript" src="/static/js/jquery.galleryview-2.1.1-min.js">
</script>
<style>
	body {
	background: #444;
	}
	#photos {
	width: 820px;
	height: 368px;
	padding: 25px;
	background: url(/static/images/border.png) top left no-repeat;
	font-size:12px

	}
	a:hover {
	text-decoration: none;
	}
	h3 {
	border-bottom-color: white;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#gallery').galleryView({
			panel_width: 790,
			panel_height: 290,
			frame_width: 100,
			frame_height: 38,
			transition_speed: 1200,
			background_color: '#222',
			border: 'none',
			easing: 'easeInOutBack',
			pause_on_hover: true,
			nav_theme: 'custom',
			overlay_height: 52,
			filmstrip_position: 'top',
			overlay_position: 'top',
		});
	});

	</script>
{%endblock%}


{% block content %}


	<div id="main">
		<div id="maincontent"><div class="forFlow" >
		<h1>{{album_name}}</h1>

<div id="photos" style="margin:0 auto">
	<div id="gallery">
			{%for photo in photos%}

				<li>
			<img src="{{photo.PhotoUrl_g}}" alt="image" title="{{photo.name}}" style="height: 290px; width: 790px; position: relative; top: 0px; left: 0px; "/>
			<div class="panel-overlay">
		    <h3><a href="{{photo.Link_url}}" target="_blank">{{photo.name}}</a></h3>
				<p>相关说明：{{photo.description}}</p>
			</div>
		</li>

			{%endfor%}

  </div>

</div>

		</div></div>

		{% include "albumsidebar.html" %}
	</div>
{% endblock %}
